import React, {
	PureComponent
} from 'react';
import {
	connect
} from 'react-redux';
import {
	ListItem,
	ListInfo,
	LoadMore
} from '../style';
import {
	Link
} from 'react-router-dom';
import {
	actionCreators
} from '../store';

class List extends PureComponent {
	render() {
		const {
			articleList,
			getMoreList,
			articlePage
		} = this.props;
		return (
			<div>
				{
					articleList.map((item) => (
						<ListItem key = {item.get('id')}>
							<img className = 'list-pic' src={item.get('imgUrl')} alt = {item.get('title')} />
							<ListInfo>
								<Link to={"/detail/" + item.get('id') } className = 'a-style'>
									<h3 className = 'title'>{item.get('title')}</h3>
								</Link>
								<p className = 'desc'>{item.get('desc')}</p>
							</ListInfo>
						</ListItem>
					))
				}
				<LoadMore onClick = {() => {getMoreList(articlePage)}}>阅读更多</LoadMore>
			</div>
		)
	}
}

const mapStateToProps = (state) => ({
	articleList: state.getIn(['home', 'articleList']),
	articlePage: state.getIn(['home', 'articlePage'])
})

const mapDispatchToProps = (dispatch) => ({
	getMoreList(articlePage) {
		dispatch(actionCreators.getMoreList(articlePage));
	}
})

export default connect(mapStateToProps, mapDispatchToProps)(List);